<template>
	<view class="container plr15">
		<view class="bgWhite  radius15 plr13 pt22 pb20">
			<view class="formitem align-center justify-between">
				<view class="formtitle">
					姓名 <text style="color: rgba(62, 89, 242, 1);">*</text>
				</view>
				<uv-input inputAlign="right" v-model="form.name" placeholder="请输入" border="none">
				</uv-input>
			</view>
			<view class="formitem align-center justify-between">
				<view class="flex1">
				<view class="formtitle">
					住户类型 <text style="color: rgba(62, 89, 242, 1);">*</text>
				</view>	
				</view>
				
				<!-- <view class="flex1 justify-end"> -->
					<uv-radio-group v-model="form.type" :customStyle="customStyle" activeColor="rgba(62, 89, 242, 1)">
						<uv-radio  :customStyle="{marginRight: '8px'}" label="业主" :name="1">
						</uv-radio>
						<uv-radio label="共有人" :name="2">
						</uv-radio>
					</uv-radio-group>
				<!-- </view> -->
		
			</view>
			<view class="formitem align-center justify-between">
				<view class="formtitle">
					身份证号 <text style="color: rgba(62, 89, 242, 1);">*</text>
				</view>
				<uv-input inputAlign="right" v-model="form.idcard" placeholder="请输入身份证号" border="none">
				</uv-input>
			</view>
			<view class="formitem align-center justify-between">
				<view class="formtitle">
					所在小区 <text style="color: rgba(62, 89, 242, 1);">*</text>
				</view>
				<view class="flex align-center" @click="choseCommunity">
				{{placeName||'请选择'}}	<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<view class="formitem align-center justify-between">
				<view class="formtitle">
					楼层房号 <text style="color: rgba(62, 89, 242, 1);">*</text>
				</view>
				<view class="flex align-center" @click="choseFloor">
				{{floorName||'请选择'}}	<uv-icon name="arrow-right"></uv-icon>
				</view>
				<!-- <uv-input inputAlign="right" v-model="form.name" placeholder="请输入楼层房号" border="none">
				</uv-input> -->
			</view>
			<view class="formitem align-center justify-between">
				<view class="formtitle">
					建筑面积 <text style="color: rgba(62, 89, 242, 1);">*</text>
				</view>
				<uv-input inputAlign="right" v-model="form.area" placeholder="请输入建筑面积" border="none">
				</uv-input>
			</view>
			<view class="formitem align-center justify-between">
				<view class="formtitle">
					手机号 <text style="color: rgba(62, 89, 242, 1);">*</text>
				</view>
				<uv-input inputAlign="right" v-model="form.phone" placeholder="请输入手机号" border="none">
				</uv-input>
			</view>
			<view class="formitem align-center justify-between">
				<view class="formtitle">
					微信号 <text style="color: rgba(62, 89, 242, 1);">*</text>
				</view>
				<uv-input inputAlign="right" v-model="form.wechat" placeholder="请输入微信号" border="none">
				</uv-input>
			</view>
			<view class="submit" @click="submit">
				确认提交
			</view>
		</view>
		<uv-picker ref="picker" :columns="columns"  keyName="name"  @confirm="confirm" ></uv-picker>
<uv-picker ref="floorpicker" :columns="floors"  keyName="name"  @confirm="confirmfloor" ></uv-picker>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		components: {

		},
		data() {
			return {
				labelStyle: {
					fontSize: '32rpx',
					fontWeight: 500,
					color: '#1a1a1a'

				},
				form: {
					name: '',
					type:1,
					idcard:"",
					community_id:"",
					floor_id:"",
					area:"",
					phone:"",
					wechat:""
					
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},

				},
					
				customStyle:{
					alignItems:'flex-end'
				},
				radiovalue: 0,
				datas:[],
				floor:[],
				placeName:"",
				floorName:""
			}
		},
		computed:{
				columns(){
					return [this.datas]
				},
				floors(){
					return [this.floor]
				}
		},
		onLoad(opt) {

		this.$api.community().then(res=>{
			this.datas=res.data
		})
		
	
		
		},
		mounted() {

		},

		methods: {
			choseCommunity(){
				this.$refs.picker.open()
			},
			choseFloor(){
				this.$refs.floorpicker.open()
			},
			confirmfloor(e){
				this.form.floor_id=e.value[0].id
				this.floorName = e.value[0].name
			},
			confirm(e){
					console.log(e)
					this.form.community_id=e.value[0].id
					this.placeName = e.value[0].name
					this.$api.floor({
						community_id:e.value[0].id
					}).then(res=>{
						this.floor=res.data
					})
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				if(!this.form.name) return this.$utils.msg('请输入姓名')
				if(!this.form.idcard) return this.$utils.msg('请输入身份证号')
				if(!this.$utils.checkStr(this.form.idcard, 'card')) return this.$utils.msg('请输入正确的身份证号')
				if(!this.form.community_id) return this.$utils.msg('请选择所在小区')
				if(!this.form.phone) return this.$utils.msg('请输入手机号')
				if(!this.$utils.checkStr(this.form.phone, 'mobile')) return this.$utils.msg('请输入正确的手机号')
				this.$api.real(this.form).then(res=>{
					if(res.code==1){
						uni.showToast({
							title:'实名成功'
						})
							
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}else{
						this.$utils.msg(res.msg)
					}
				})
			},
		}





	}
</script>
<style scoped lang="scss">
	.container {
		height: 100vh;
		// background:#fff;
		padding-top: 40rpx;
	}

	.formtitle {
		font-size: 30rpx;
		color: #000000;
		font-weight: bold;

		text {
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.formitem {
		padding-bottom: 44rpx;
		border-bottom: 1px solid #f8f8f8;
		margin-bottom: 44rpx;
	}
	.submit{
		width: 430rpx;
		height: 93rpx;
		margin: 0 auto;
		background: #3E59F2;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 93rpx;
		border-radius: 47rpx 47rpx 47rpx 47rpx;
	}
	
</style>